/*banner图*/
.banner{
	width: 100%;
	height: 780px;
	position: relative;
	overflow: hidden;
}
.banner>img{
	width: 100%;
    display: block;
	transition: .8s;
}
/*跟随屏幕滚动*/
.flowScoll{
	z-index: 10;
	position: fixed;
	top: 45%;
	right: 0;
}
.flowScoll li{
	position: relative;
	height: 64px;
}
.lowe{
	width: 245px;
	height: 64px;
	display: none;
    position: absolute;
    right: 0;
    top: 0;
	line-height: 64px;
	background: url(../images/index/cg_telb.png);
}
.lowe2{
	width: 245px;
	height: 64px;
	display: none;
    position: absolute;
    right: 0;
    top: 0;
	line-height: 64px;
	background: url(../images/index/cg_kfb.png);
}
.lowe3{
	width: 245px;
	height: 64px;
	display: none;
    position: absolute;
    right: 0;
    top: 0;
	line-height: 64px;
	background: url(../images/index/cg_lyb.png);
}
.lowe4{
	width: 245px;
	height: 64px;
	display: none;
    position: absolute;
    right: 0;
    top: 0;
	line-height: 64px;
	background:#d5b873;
}
.flowScoll a{
	font-size: 16px;
	color: #fff;
}
.flowScoll a>p{
	margin-left:110px;
}
.p1{
    font-size: 16px;
	color: #fff;
	margin-left:110px;
	cursor: pointer;
}
.flowScoll>li:hover img{
	display: none;
}
.flowScoll>li:hover .lowe{
	display: block;
}
.flowScoll>li:hover .lowe2{
	display: block;
}
.flowScoll>li:hover .lowe3{
	display: block;
}
.flowScoll>li:hover .lowe4{
	display: block;
}
/*聚焦效果*/
.focusLeft{
    width: 20%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: -20%;
    animation: fl 2s ;
}
@keyframes fl{
    0%{ left: -20% ;height: 100%;top: 0;}
    100%{ left: 0 ;height: 60%; top: 20%;}
}
.focusTop{
	width: 100%;
    height: 20%;
    background: rgba(0,0,0,0.5);
    position: absolute;
    top: -20%;
    animation: ft 2s ;
}
@keyframes ft{
    0%{ top: -20% ;}
    100%{ top: 0 ;}
}
.focusRight{
    width: 20%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    right: -20%;
    animation: fr 2s ;
}
@keyframes fr{
    0%{ right: -20% ;height: 100%; top: 0;}
    100%{ right: 0 ;height: 60%; top: 20%;}
}
.focusBottom{
	width: 100%;
    height: 20%;
    background: rgba(0,0,0,0.5);
    position: absolute;
    bottom: -20%;
    animation: fb 2s ;
}
@keyframes fb{
    0%{bottom: -20% ;}
    100%{ bottom: 0 ;}
}
.focusMid{
	width: 100%;
	height: 100%;
	background: url(../images/index/banner_border.png);
	background-size: 100% 100%;
	transform: scale(1);
	position: absolute;
	opacity: 0;
	animation: fm 2s ;
	top: 0;
	left: 0;
}
@keyframes fm{
	0% {transform: scale(1);opacity: 0}
	100%{transform: scale(0.6);left: 0;opacity: 1}
}
/*切换箭头*/
.arrL{
	width: 56px;
	height: 112px;
	background: url(../images/index/index1_03.png);
	background-size: 100%;
	position: absolute;
	top: 50%;
	left: 8%;
	cursor: pointer;
}
.arrR{
	width: 56px;
	height: 112px;
	background: url(../images/index/index1_05.png);
	background-size: 100%;
	position: absolute;
	top: 50%;
	right: 8%;
	cursor:pointer;
}
/*底部切换按钮*/
.list{
	width: 128px;
	position:absolute;
	left: 45.8%;
	bottom:15%;
}
.list>li{
	width: 24px;
	height: 25px;
	float: left;
	cursor: pointer;
	background: url(../images/index/inded_05.png);
	background-size: 100%;
}
.list>li:nth-of-type(2){
	margin:0 10%;
}
.lxz{
	background: url(../images/index/inded_03.png) !important;
}
.light{
	width: 28px;
	height: 61px;
	position: absolute;
	left: 48%;
	bottom: 4%;
	transition: .8s;
	opacity: 1;
	background: url(../images/index/index1_10.png);
}
/*课程标题*/
.Title{
	width: 20.31%;
	margin:0 auto;
}
.Title>img{
	width: 100%;
}
/*课程内容*/
.coursrContnet{
	margin-top: 2%;
}
.coursrContnet>li{
	width: 50%;
	position: relative;
}
.coursrContnet>li>img{
	width: 100%;
	height: 100%;
}
/*平时选中*/
.coursrmnr{
	width: 100%;
	font-size: 14px;
	color: #fff;
	position: absolute;
	bottom: 0;
	line-height: 60px;
	text-align: center;
	background: rgba(0,0,0,0.5);
}
/*课程hover*/
.courseHover{
	width: 100%;
	height:100%;
	position: absolute;
	top: 80%;
	left: 0;
	background:rgba(0,0,0,0.5);
    transition: .8s;
	opacity: 0;
}
.coursrContnet>li{
	float: left;
	cursor: pointer;
    overflow: hidden;
}
.coursrContnet>li:hover .coursrmnr{
	display: none;
}
.coursrContnet>li:hover .courseHover{
	top: 0;
}
.coursrContnet>li:hover .courseHover{
	opacity: 1;
}
.yuemeiban{
	margin-left: 35%;
	color: #fff;
	padding-top: 6%;
	line-height: 25px;
}
.yuemeiban>h3{
    margin-bottom: 5%;
    font-weight: 200;
    color: #d5b873;
    font-size: 18px;
}
.clcik_more{
	width: 91px;
	height: 44px;
	background: url(../images/index/indeh_03.png);
	background-size: 100%;
	margin-top: 5%;
}
.clcik_more:hover{
	background: url(../images/index/inde1_03.png);
	background-size: 100%;
}
/*关于我们*/
.aboutUs{
	width: 100%;
	height: 731px;
	padding-top: 3.5%;
	overflow: hidden;
	background: url(../images/index/indebj_02.png);
    background-size: 100%;
}
.abTitil{
	transform: translateY(-154%);
	transition: .8s;
}
.minTittl{
	width: 31.83%;
	margin:50px auto;
	color: #ffff99;
	font-size: 24px;
	line-height: 44px;
	text-align:center;
	transition: 1s .8s;
	transform: translateY(-319%);
}
.aboutUsText{
	width: 63.02%;
	margin:0 auto;
	color: #fff;
	text-indent: 2em;
	font-size: 16px;
	line-height:35px;
	margin-bottom: 7%;
	transition: 1.2s 1s;
	transform: translateY(-270%);
}
.abClickMoer{
	width: 91px;
	height: 44px;
	background: url(../images/index/indeh_03.png);
	background-size: 100%;
	margin:0 auto;
	cursor: pointer;
	transition: 1.4s 1.2s;
	transform: translateY(-700px);
}
.abClickMoer a{
	width: 100%;
	height:44px;
	display: block;
}
.abClickMoer:hover{
	background: url(../images/index/inde1_03.png);
	background-size: 100%;
}
/*我们的优势*/
.advantage{
	width: 100%;
	height: 556px;
	position: relative;
	padding-top: 390px;
}
.tit{
	width: 127px;
	height: 170px;
	cursor: pointer;
    margin:0 auto;
}
/*1-7文本*/
.biaoti>span:nth-of-type(1){
    font-size: 60px;
    color: #ab8c42;
    font-style: italic;
}
.biaoti>span:nth-of-type(2){
    font-size: 24px;
    color: #ab8c42;
    margin-left:2%;
}
.text>li{
	width: 327px;
	transition: .8s;
	opacity: 0;
}
.text p{
    font-size: 16px;
    color: #666;
}
/*1-7文本定位*/
.one{
	position: absolute;
	top:50%;
	left: 16%;
}
.two{
	position: absolute;
	top: 21%;
	left: 20%;
}
.three{
	position: absolute;
	top: 6%;
	left: 40%;
}
.four{
	position: absolute;
	top: 13%;
	right: 16%;
}
.five{
	position: absolute;
	top: 53%;
	right: 12%;
}
.six{
	position: absolute;
	top: 74%;
	right: 24%;
}
.seven{
	position: absolute;
	top: 77%;
	right: 49%;
}
.adPic>img{
	width: 25%;
	opacity: 0;
	transition: 1.2s;
}
/*图片定位*/
.pic_one{
	position: absolute;
	top: 51%;
	left:18.5%;
	transform: rotate(-107.84deg);
}
.pic_two{
	position: absolute;
	top: 25.1%;
	left:  20.8%;
	transform: rotate(-50.42deg);
}
.pic_three{
	position: absolute;
	top:  11.6%;
	left:  36.1%;
}
.pic_four{
	position: absolute;
	top:  22.6%;
	left:   52.7%;
	transform: rotate(48.42deg);
}
.pic_five{
	position: absolute;
	top: 49.9%;
	left: 57.8%;
	transform: rotate(99.8deg);
}
.pic_six{
	position: absolute;
	top:  71.5%;
	left:  48.2%;
	transform: rotate(157.26deg);
}
.pic_seven{
	position: absolute;
	top:   72.0%;
	left: 30.5%;
	transform: rotate(-155.26deg);
}
/*纹绣咨询*/
.advisory{
	width: 100%;
	height: 894px;
	padding-top: 3.5%;
	margin-top: 1%;
	background: url(../images/index/news_bg.png);
}
/*纹绣列表*/
.advList{
	margin-top: 12%;
	margin-bottom: 6%;
}
.advList>li{
    width: 20%;
    position: relative;
    float: left;
    margin-right: 6.6%;
    overflow: hidden;
}
.advList>li:nth-of-type(4){
	margin-right: 0;
}
.advList>li>img{
	width: 100%;
}
/*咨询选中效果*/
.line{
	width: 90%;
	height: 1px;
	background: #fff;
    margin:5% auto;
}
.advMsg{
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
	background: black;
}
.advList>li:hover .advMsg{
	display: none;
}
.advmoer a{
	width: 100%;
	height:44px;
	display: block;
}
.date{
	width: 45%;
	margin:0 auto;
	margin-top: 5%;
}
.date>span{
     color: #ab8c42;
     font-size: 14px;
}
.date>span:nth-of-type(2){
     margin-left: 10%;
     font-size: 20px;
}
.advMsg>p{
	font-size: 14px;
	color: #fff;
	text-align: center;
	margin-bottom: 5%;
}
/*咨询hover*/
.advHover{
	position: absolute;
	top: 76%;
	left: 0;
	width: 100%;
	height: 74%;
	padding-top: 40%;
	background:rgba(0,0,0,0.5);
	opacity: 0;
	transition: 0.8s;
}
.advList>li:hover .advHover{
	opacity: 1;
	top: 0;
}
.advHover>p{
	color: #ebeb8d;
	font-size: 14px;
	text-align: center;
}
.hoverText{
	width: 85%;
	margin:0 auto;
	margin-top: 5%;
	line-height:30px;
}
.hoverText>p{
	color: #fff;
	font-size:12px;
	text-indent: 2em;
}
/*咨询更多内*/
.advmoer{
	width: 91px;
	height: 44px;
	background: url(../images/index/indeh_03.png);
	margin:0 auto;
	cursor: pointer;
}
.advmoer:hover{
	background:url(../images/index/inde1_03.png);
}
/*服务*/
.serveList{
	float: left;
	margin-left: 6%;
}
.serveList>li{
	width: 101px;
	height: 135px;
	margin-bottom: 1%;
	cursor: pointer;
}
.serveList>li>img{
	width: 100%;
}
/*小标题*/
.serveTitle{
	float: left;
	margin-top: 6%;
	margin-left: 6%;
}
.serveTitle>img{
	width: 100%;
}
/*需要 切换的内容*/
.serveQiehuan{
	width: 54.06%;
	float: left;
	margin-left: 8%;
	margin-top: 4%;	
}
.serveQiehuan>img{
	width: 100%;
}
/*纹绣案例*/
.serve{
	padding-top: 3.5%;
}
.position{
	position: relative;
	height: 380px;
	margin-top: 3%;
}
.caseTop{
	width: 100%;
	height: 265px;
	padding-top: 3.5%;
	background: #fff9e7;
}
.caseText{
	width: 30%;
	margin:0 auto;
    font-size: 14px;
    color: #010101;
    text-align: center;
    line-height: 25px;
    margin-bottom: 4%;
    margin-top: 2%;
}
.caseBox{
	width: 85%;
	margin-left: 10%;
	overflow:hidden;
}
.caseList>li{
    width: 200px;
    float: left;
    margin-right: 73px;
    cursor: pointer;
}
.caseList>li>img{
	width: 100%;
}
.caseH{
	display: none;
}
.caseList>li:hover .caseShow{
	display: none;
}
.caseList>li:hover .caseH{
	display: block;
}
/*控制箭头*/
.caseArrL{
	width: 48px;
	height: 48px;
	background: url(../images/index/index_80.png);
	background-size: 100%;
	position: absolute;
    top: 40%;
    left: 0%;
    cursor:pointer;
}
.caseArrR{
	width: 49px;
	height: 48px;
	background: url(../images/index/index_83.png);
	background-size:100%;
	position:absolute;
	top: 40%;
	right:0;
	cursor:pointer;
}
/*更多案例*/
.caseMoer{
	width: 91px;
	height: 44px;
	margin:0 auto;
    background: url(../images/index/dad_03.png);
    background-size: 100%;
    cursor:pointer;
}
.caseMoer:hover{
	background: url(../images/index/inde1_03.png);
}
